<script setup>
import {ref} from 'vue';
import {getPublicDetailApi} from '@/service/member';

// 客资详情
const customer = ref({
  id: "",
  category: {
    id: "",
    title: ''
  },
  source: {
    id: "",
    title: ''
  },
  city: {
    id: "",
    name: '',
    shortname: ''
  },
  creator: {
    id: "",
    realname: ''
  },
  create_time: '',
});

// 定义联系人
const contacts = ref([]);

// 咨询的产品
const product = ref({
  id: '',
  event_date: '',
  budget: '',
  table_amount: '',
});

// 跟进记录
const visits = ref([]);

// 打开抽屉
const visible = ref(false);
const openDrawer = (row) => {
  visible.value = true;
  let member_id = row.id;
  getPublicDetailApi({member_id}).then(({code, data, msg}) => {
    contacts.value = data.contacts;
    customer.value = data.customer;
    product.value = data.product;
    visits.value = data.visits;
  });
};

// 关闭抽屉
const closeDrawer = () => {
  visible.value = false;
};

// 处理tab点击事件
const handleTabClick = (tab) => {
  // console.log(tab);
};

const activeName = ref('first');

defineExpose({
  openDrawer
});

</script>

<template>
  <el-drawer v-model="visible" title="客资详情" :with-header="false" size="500px" direction="rtl"
             body-class="drawer-detail" :before-close="closeDrawer">
    <div class="drawer-header">
      <el-row class="customer-head">
        <el-col :span="12">
          <div class="avatar-box">
            <el-avatar shape="square" size="large"
                       src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"/>
            <div class="right">
              <h3>{{ customer.category.title ? customer.category.title : '其他' }}</h3>
              <p>{{ customer.source.title }}</p>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
        </el-col>
      </el-row>
      <el-descriptions :column="3" direction="vertical" border>
        <el-descriptions-item label="城市">{{ customer.city.name }}</el-descriptions-item>
        <el-descriptions-item label="区域" :span="2">
          <el-tag style="margin-right: 3px;" v-for="item in customer.zone" :key="item" type="primary">{{
              item.name
            }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="婚期">{{ product.event_date ? product.event_date : '-' }}</el-descriptions-item>
        <el-descriptions-item label="预算">{{ product.budget ? product.budget : '-' }}</el-descriptions-item>
        <el-descriptions-item label="桌数">{{
            product.table_amount ? product.table_amount : '-'
          }}
        </el-descriptions-item>
      </el-descriptions>

      <el-table :data="contacts" border class="table-contacts">
        <el-table-column prop="role_type" label="角色" width="50" align="center"></el-table-column>
        <el-table-column prop="name" label="称呼" width="100" align="center"></el-table-column>
        <el-table-column prop="contact" label="联系方式">
          <template #default="{row}">
            <div class="contact">
              <el-icon class="icon" v-if="row.type == 1">
                <Iphone/>
              </el-icon>
              <el-icon class="icon" v-else>
                <ChatLineRound/>
              </el-icon>
              <el-link type="primary" :href="'tel:' + row.contact">{{ row.contact }}</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-tabs v-model="activeName" @tab-click="handleTabClick" type="border-card" style="margin: 0 1rem;">
      <el-tab-pane label="跟进" name="first">
        <el-timeline style="max-width: 600px">
          <el-timeline-item v-for="item in visits" :key="item.id" :timestamp="item.create_time" placement="top">
            <el-descriptions :column="1">
              <el-descriptions-item label="跟进状态">
                <el-tag type="primary">{{ item.status_title }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="跟进人">{{ item.user.realname }}</el-descriptions-item>
              <el-descriptions-item label="下次跟进时间">{{ item.next_visit_time }}</el-descriptions-item>
              <el-descriptions-item label="跟进记录">{{ item.remark }}</el-descriptions-item>
            </el-descriptions>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
      <el-tab-pane label="其他信息" name="second">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="创建人">{{ customer.creator.realname }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ customer.create_time }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{ customer.remark }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
    </el-tabs>

    <el-button type="danger" circle icon="Close" @click="closeDrawer"
               style="position: absolute; top: 1rem; right: 1rem"/>
  </el-drawer>
</template>

<style scoped lang="less">
.drawer-header {
  background-color: #EBEDF0;
  padding: 1rem;

  .customer-head {
    margin-bottom: 10px;


    .avatar-box {
      display: flex;
      align-items: center;

      .right {
        margin-left: 10px;

        h3 {
          color: #E6A23C;
          font-size: 18px;
          margin-bottom: 5px;
        }

        p {
          font-size: 14px;
          color: #606266;
        }
      }
    }

    .tag-zone {
      margin-right: 5px;
    }
  }

  .table-contacts {
    margin-top: 1rem;
  }


  .contact {
    display: flex;
    align-items: center;
    color: #409EFF;

    .icon {
      margin-right: 3px;
    }
  }
}
</style>